// pages/home-music/index.js
import { rankingStore,rankingMap }from '../../store/ranking-store'

import {getBanners, getSongMenu} from '../../service/api_music'

import queryRect from '../../utils/selector-rect'
import throttle from '../../utils/throottle'
import { playerStore } from '../../store/payer-store'


// 节流函数   trailing:true  最后一次也执行一次
const throttleQueryRect = throttle(queryRect, 1000,{ trailing:true })


Page({
  data: {
    banners:[],
    swiperHeight:0,
    recommendSong:[], //推荐歌曲
    HotSongMenus:[], //热门歌单  
    recommendSoneMenu:[] ,//推荐歌单
    rankings:{0:{},2:{},3:{}},
    currentSong:{},
    isPlaying:false
  },
  onLoad: function (options) {
    // 请求页面数据
      this.getPageData()

      // 共享数据请求
      rankingStore.dispatch('getRankDataAction')
      // 从store拿数据  
      //  1 排行榜监听
      rankingStore.onState('hotRanking',res=>{
        if(!res.tracks) return
        const recommendSong=res.tracks.slice(0,6)
         this.setData({recommendSong})
      })
      rankingStore.onState('newRanking',this.getNewRankingHanler(0))
      rankingStore.onState('originRanking',this.getNewRankingHanler(2))
      rankingStore.onState('upRanking',this.getNewRankingHanler(3))
      //2 播放器监听
      playerStore.onStates(["currentSong", "isPlaying"], ({currentSong, isPlaying}) => {
        if (currentSong) this.setData({ currentSong })
        if (isPlaying !== undefined) {
          this.setData({ 
            isPlaying, 
            playAnimState: isPlaying ? "running": "paused" 
          })
        }
      })
  },
  // 网络请求
  getPageData:function(){
    getBanners().then(res=>{
     this.setData({banners:res.banners})
    })
    
    getSongMenu().then(res=>{
      this.setData({ HotSongMenus:res.playlists})
    })
    getSongMenu("华语").then(res=>{
      this.setData({ recommendSoneMenu:res.playlists})
    })
  },


  handleSearchClick:function(){
    wx.navigateTo({
      url: '/pages/detail-search/index',
    })
  },

  handleSwiperImageLoaded:function(){
    // 获取图片高度
    throttleQueryRect ('.swiper-image').then(res=>{
      const rect=res[0]
      // console.log(rect.height);
      this.setData({swiperHeight: rect.height })
    })
  },

  handleMorkClick:function(){
    this.navgateToDetailSonePage('hotRanking')
  },
  // 点击巅峰榜的item
  handleRankingItemClick:function(event){
     const idx=event.currentTarget.dataset.id
     const rankingName=rankingMap[idx]
   
     this.navgateToDetailSonePage(rankingName)
  },
  navgateToDetailSonePage:function(rankingName){
    wx.navigateTo({
      url: `/pages/detail-songs/index?ranking=${rankingName}&type=rank`,
    })
  },
  getNewRankingHanler:function(idx){
    return (res)=>{
        if(Object.keys(res).length===0) return
        const name=res.name
        const coverImgUrl=res.coverImgUrl
        const playCount=res.playCount
        const songList=res.tracks.slice(0,3)
        const rankingObj={name,coverImgUrl,songList,playCount}
        const newRankings={...this.data.rankings,[idx]: rankingObj}

        this.setData({
          rankings:newRankings
        })
        // console.log(this.data.rankings);
      }
  },
  handleSongItemClick:function(e){
    const index=e.currentTarget.dataset.index
    console.log(index,this.data.recommendSong);
    playerStore.setState('playListSongs',this.data.recommendSong)
    playerStore.setState('playListIndex',index)
    console.log(index);
  },


  handlePlayBtnClick: function() {
    playerStore.dispatch("changeMusicPlayStatusAction", !this.data.isPlaying)
  },
})